<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <title>卫生局注册</title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp" %>
    <link href="${ctx}/lib/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" />
    <style type="text/css">
    	section.content-header {
    		padding: 15px 90px 0px 90px;
    	}
    	section.content {
    		padding: 15px 90px;
    	}
    	ol.ol {
    		margin: 10px 0px 5px 0px;
    		padding: 0px;
    		border-bottom: 3px solid #d4d4d4;
    		height: 56px;
    		list-style: none;
    		text-align: center;
    	}
    	ol.ol li {
    		width: 300px;
    		height: 56px;
    		line-height: 46px;
    		text-align: left;
    		padding-left: 130px;
    		display: inline-block;
    		font-size: 16px;
    		font-family: "宋体";
    		margin-bottom: -3px;
    	}
    	li.base {
    		background: url("${ctx}/lib/img/reg/base.png") no-repeat 80px 0px;
    	}
    	.baseFocus {
    		border-bottom: 3px solid #00a65a;
    	}
    	li.perfect {
    		background: url("${ctx}/lib/img/reg/perfect.png") no-repeat 80px 0px;
    	}
    	.perfectFocus {
    		border-bottom: 3px solid #3c8dbc;
    	}
    	.perfected {
    		background: url("${ctx}/lib/img/reg/perfect2.png") no-repeat 80px 0px !important;
    	}
    	li.finish {
    		background: url("${ctx}/lib/img/reg/finish.png") no-repeat 80px 0px;
    	}
    	.finishFocus {
    		border-bottom: 3px solid #f39c12;
    	}
    	.finished {
    		background: url("${ctx}/lib/img/reg/finish2.png") no-repeat 80px 0px !important;
    	}
    	.btn {
    		padding: 4px 20px;
    	}
    	div#perfectInfo, button#prev, button#save, div#finishInfo {
    		display: none;
    	}
    	div#finishInfo {
    		margin-top: 20px;
    	}
    	span.required {
    		color: red;
    		margin-right: 6px;
    	}
    	div.imgDiv {
    		width: 157px;
    		height: 196px;
    		float: right;
    		background: url("${ctx}/lib/img/reg/reg-sucess.png") no-repeat 0px 0px !important;
    	}
    	h3.tipsTitle {
    		font-family: "黑体";
    		font-size: 40px;
    		margin-top: 50px;
    		margin-left: 35px;
    		color: #003b53;
    	}
    	div.tipsText {
    		margin-top: 0px;
    		margin-left: 40px;
    	}
    </style>
</head>
<body class="skin-blue sidebar-mini fixed skin-blue-light-frame">
    <section class="content-header">
        <h1>卫生局注册</h1>
        <ol class="ol">
            <li class="base baseFocus">填写基本信息</li>
            <li class="perfect">完善其他信息</li>
            <li class="finish">注册完成</li>
        </ol>
    </section>
    <section class="content">
        <div class="box box-success ">
            <form id="form" class="form-horizontal" action="saveRegheaBurInfo.html" method="post">
                <div id="baseInfo" class="box-body">
                	<div class="form-group form-group-xs">
                        <label for="heaBurCode" class="col-sm-2 text-right"><span class="required">*</span>卫生局编码：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="heaBurCode" name="heaBurCode" placeholder="卫生局编码" type="text" maxlength="50">
                        </div>
                        <label for="heaBurName" class="col-sm-3 text-right"><span class="required">*</span>卫生局名称：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="heaBurName" name="heaBurName" placeholder="卫生局名称" type="text" maxlength="100">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="orgCode" class="col-sm-2 text-right"><span class="required">*</span>组织机构代码：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="orgCode" name="orgCode" placeholder="组织机构代码" type="text" maxlength="20">
                        </div>
                        <label for="hospPhone" class="col-sm-3 text-right"><span class="required">*</span>卫生局电话：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="hospPhone" name="hospPhone" placeholder="卫生局电话" type="text" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="hospAddress" class="col-sm-2 control-label"><span class="required">*</span>卫生局地址：</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="hospAddress" name="hospAddress" rows="3" placeholder="卫生局地址" maxlength="512"></textarea>
                        </div>
                    </div>
                </div>
                
                <div id="perfectInfo" class="box-body">
                <div class="box-header with-border">
                <h3 class="box-title">卫生局信息</h3>
                </div>
                    <div class="form-group form-group-xs">
                    <label for="area" class="col-sm-2 control-label"><span class="required">*</span>注册地区：</label>
                        <div class="col-sm-3">
                            <select id="area1" class="form-control" style="width:31%;display:inline-block;"></select>
                            <select id="area2" name="area.areaid" class="form-control" style="width:31%;display:inline-block;"></select>
                            <select id="area3" name="area.areaid" class="form-control" style="width:31%;display:inline-block;"></select>
                        </div>
                        <label for="staffNum" class="col-sm-3 text-right"><span class="required">*</span>员工数：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="staffNum" name="staffNum" placeholder="员工数" type="text" maxlength="11">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="profile" class="col-sm-2 control-label">卫生局简介：</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="profile" name="profile" rows="3" placeholder="简介" maxlength="1000"></textarea>
                        </div>
                    </div>
                 <div class="box-header with-border">
                <h3 class="box-title">联系人信息</h3>
                </div>
                    <div class="form-group form-group-xs">
                        <label for="contactName" class="col-sm-2 text-right"><span class="required">*</span>联系人姓名：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactName" name="contactName" placeholder="联系人姓名" type="text" maxlength="10">
                        </div>
                        <label for="contactIdnum" class="col-sm-3 text-right"><span class="required">*</span>联系人身份证号：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactIdnum" name="contactIdnum" placeholder="联系人身份证号" type="text" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="contactPos" class="col-sm-2 text-right"><span class="required">*</span>联系人职务：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactPos" name="contactPos" placeholder="联系人职务" type="text" maxlength="32">
                        </div>
                        <label for="contactTelephone" class="col-sm-3 text-right"><span class="required">*</span>联系人电话：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactTelephone" name="contactTelephone" placeholder="联系人电话" type="text" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="contactHandphone" class="col-sm-2 text-right"><span class="required">*</span>联系人手机：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactHandphone" name="contactHandphone" placeholder="联系人手机" type="text" maxlength="20">
                        </div>
                        <label for="contactEmail" class="col-sm-3 text-right"><span class="required">*</span>联系人邮箱：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactEmail" name="contactEmail" placeholder="联系人邮箱" type="text" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="contactQq" class="col-sm-2 text-right">联系人QQ：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="contactQq" name="contactQq" placeholder="联系人QQ" type="text" maxlength="20">
                        </div>
                    </div>
                </div>
                
                <div id="finishInfo" class="box-body">
                	<div class="form-group form-group-xs">
                        <div class="col-sm-5  text-right">
                        	<div class="imgDiv"></div>
                        </div>
                        <div class="col-sm-7">
                        	<h3 class="tipsTitle">恭喜你，注册成功！</h3>
                            <div class="col-sm-12 tipsText">注册完成，请携带相关证件到采购中心领取帐号。</div>
                        </div>
                    </div>
                </div>
                
                <div class="box-footer text-center">
                	<button id="prev" type="button" class="btn btn-success" onclick="prevStep();">上一步</button>
                    <button id="next" type="button" class="btn btn-success" onclick="nextStep();">下一步</button>
                    <button id="save" type="button" class="btn btn-success" onclick="saveStep();">保  存</button>
                    <a href="toUserRegister.html" class="btn btn-danger">返  回</a>
                </div>
            </form>
        </div>
    </section>
    
    <%@ include file="/WEB-INF/component/commonJS.jsp" %>
    <script src="${ctx}/lib/plugins/daterangepicker/moment.js"></script>
    <script src="${ctx}/lib/plugins/daterangepicker/daterangepicker.js"></script>
    
    <script type="text/javascript">
    	function nextStep() {
    		if (validateBase()) {
    			$("div#baseInfo").hide();
        		$("div#perfectInfo").show();
        		$("#next").hide();
        		$("#prev").show();
        		$("#save").show();
        		$("li.base").removeClass("baseFocus");
        		$("li.perfect").addClass("perfectFocus");
        		$("li.perfect").addClass("perfected");
        		$(".box.box-success").css("border-top-color", "#3c8dbc");
    		}
    	}
    	
    	function prevStep() {
    		$("div#baseInfo").show();
    		$("div#perfectInfo").hide();
    		$("#next").show();
    		$("#prev").hide();
    		$("#save").hide();
    		$("li.base").addClass("baseFocus");
    		$("li.perfect").removeClass("perfected");
    		$("li.perfect").removeClass("perfectFocus");
    		$(".box.box-success").css("border-top-color", "#00a65a");
    	}
    	
    	function saveStep() {
    		if (validateBase() && validatePerfect()) {
    			$("#form").ajaxSubmit({
        			dataType : "json",
        			timeout: 10000,
        			success : function(result, statusText) {
        				if (result.success) {
        					$("#next").hide();
        	        		$("#prev").hide();
        	        		$("#save").hide();
        	        		$("div#baseInfo").hide();
        	        		$("div#perfectInfo").hide();
        	        		$("li.base").removeClass("baseFocus");
        	        		$("li.perfect").removeClass("perfectFocus");
        	        		$("li.finish").addClass("finished");
        	        		$("li.finish").addClass("finishFocus");
        	        		$(".box.box-success").css("border-top-color", "#f39c12");
        	        		$("div#finishInfo").show();
        					// $.HN.message.alert("保存成功！", "消息", "success");
        				 } else {
        					$.HN.message.alert(result.msg || "", "消息", "error");
        				}
        			}
        		});
    		} 
    	}
    	
    	function validateBase() {
    		
    		 var heaBurCode = $.trim($("#heaBurCode").val());
    		if (heaBurCode == null || heaBurCode == "") {
    			$.HN.message.alert("请输入卫生局编码！", "消息", "warn");
    			return false;
    		} else if (!/^[a-zA-Z0-9_]+$/.test(heaBurCode)) {
    			$.HN.message.alert("卫生局编码只能由字母数字下划线组成！", "消息", "warn");
    			return false;
    		}
    		$("#heaBurCode").val(heaBurCode);

    		var heaBurName = $.trim($("#heaBurName").val());
    		if (heaBurName == null || heaBurName == "") {
    			$.HN.message.alert("请输入卫生局名称！", "消息", "warn");
    			return false;
    		}
    		$("#heaBurName").val(heaBurName);


    		var orgCode = $.trim($("#orgCode").val());
    		if (orgCode == null || orgCode == "") {
    			$.HN.message.alert("请输入组织机构代码！", "消息", "warn");
    			return false;
    		} else if (!/^[a-zA-Z0-9_]+$/.test(orgCode)) {
    			$.HN.message.alert("组织机构代码只能由字母数字下划线组成！", "消息", "warn");
    			return;
    		}
    		$("#orgCode").val(orgCode);

    		var heaBurPhone = $.trim($("#hospPhone").val());
    		if (heaBurPhone == null || heaBurPhone == "") {
    			$.HN.message.alert("请输入卫生局电话！", "消息", "warn");
    			return false;
    		} else if (!/^(\d+[-]\d+)|(\d+)$/.test(heaBurPhone)) {
    			$.HN.message.alert("请输入正确的卫生局电话！", "消息", "warn");
    			return false;
    		}
    		$("#hospPhone").val(heaBurPhone);
    		
    		var heaBurAddress = $.trim($("#hospAddress").val());
    		if (heaBurAddress == null || heaBurAddress == "") {
    			$.HN.message.alert("请输入卫生局地址！", "消息", "warn");
    			return false;
    		}
    		$("#hospAddress").val(heaBurAddress);
    		
    		return true;
    	}
    	
    	function validatePerfect() {
    		var reg = new RegExp(regexEnum.intege1);
    		
    		var area3 = $.trim($("#area3").val());
    		var area2 = $.trim($("#area2").val());
    		if($("#area3 option").length > 1){
    			if (area3 == null || area3 == "") {
        			$.HN.message.alert("请选择注册地区！", "消息", "warn");
        			return false;
        		}
    			$("#area2").attr("name","area2");
    		}else{
    			if (area2 == null || area2 == "") {
        			$.HN.message.alert("请选择注册地区！", "消息", "warn");
        			return false;
        		}
    			$("#area3").attr("name","area");
    		}
    	
    		
    		
    		var staffNum = $.trim($("#staffNum").val());
    		if (staffNum == null || staffNum == "") {
    			$.HN.message.alert("请输入员工数！", "消息", "warn");
    			return false;
    		} else if (!/^\d+$/.test(staffNum)) {
    			$.HN.message.alert("你输入的员工数不是一个正整数！", "消息", "warn");
    			return false;
    		}
    		$("#staffNum").val(staffNum);

    		var contactName = $.trim($("#contactName").val());
    		if (contactName == null || contactName == "") {
    			$.HN.message.alert("请输入联系人姓名！", "消息", "warn");
    			return false;
    		}
    		$("#contactName").val(contactName);

    		var contactIdnum = $.trim($("#contactIdnum").val());
    		if (contactIdnum == null || contactIdnum == "") {
    			$.HN.message.alert("请输入联系人身份证号！", "消息", "warn");
    			return false;
    		} else if (!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/.test(contactIdnum)) {
    			$.HN.message.alert("联系人身份证号错误！请正确输入！", "消息", "warn");
    			return false;
    		}
    		$("#contactIdnum").val(contactIdnum);

    		var contactPos = $.trim($("#contactPos").val());
    		if (contactPos == null || contactPos == "") {
    			$.HN.message.alert("请输入联系人职务！", "消息", "warn");
    			return false;
    		}
    		$("#contactPos").val(contactPos);

    		var contactTelephone = $.trim($("#contactTelephone").val());
    		if (contactTelephone == null || contactTelephone == "") {
    			$.HN.message.alert("请输入联系人电话！", "消息", "warn");
    			return false;
    		} else if (!/^(\d+[-]\d+)|(\d+)$/.test(contactTelephone)) {
    			$.HN.message.alert("请输入正确的联系人电话！", "消息", "warn");
    			return false;
    		}
    		$("#contactTelephone").val(contactTelephone);

    		var contactHandphone = $.trim($("#contactHandphone").val());
    		if (contactHandphone == null || contactHandphone == "") {
    			$.HN.message.alert("请输入联系人手机号！", "消息", "warn");
    			return false;
    		} else if (!/^(\d+[-]\d+)|(\d+)$/.test(contactHandphone)) {
    			$.HN.message.alert("请输入正确的联系人手机号！", "消息", "warn");
    			return false;
    		}
    		$("#contactHandphone").val(contactHandphone);

    		var contactEmail = $.trim($("#contactEmail").val());
    		if (contactEmail == null || contactEmail == "") {
    			$.HN.message.alert("请输入联系人邮箱！", "消息", "warn");
    			return false;
    		} else if (!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(contactEmail)) {
    			$.HN.message.alert("电子邮箱格式不正确！", "消息", "warn");
    			return false;
    		}
    		$("#contactEmail").val(contactEmail);
    		
    		var contactQQ = $.trim($("#contactQq").val());
    		if (contactQQ != null && contactQQ != "") {
    			if (!/^\d+[a-zA-Z0-9]$/.test(contactQQ)) {
        			$.HN.message.alert("联系人QQ号只能由数字组成！", "消息", "warn");
        			return false;
    			}
    		}
    		$("#contactQq").val(contactQQ);

    		return true;
    	}
    
    	$(document).ready(function() {
    		
    		$("#area1").HNSelect({
                url: "${ctx}/selectController/getArea.html", 
                data: { ID: '000000' }, 
                defaultText: "<option value=''>请选择</option>",
                defaultselect: "${ heaBurInfo.area.father.father.areaid  }",
                func: function () {
                    $("#area2").HNSelect({
                        parent_selector: "#area1", 
                        url: "${ctx}/selectController/getArea.html", 
                        dataid: "ID", 
                        defaultText: "<option value=''>请选择</option>",
                        defaultselect: "${ heaBurInfo.area.father.areaid  }",
                        func: function () {
                            $("#area3").HNSelect({
                                parent_selector: "#area2", 
                                url: "${ctx}/selectController/getArea.html", 
                                dataid: "ID", 
                                defaultText: "<option value=''>请选择</option>",
                                defaultselect: "${ heaBurInfo.area.areaid  }"
                            });
                        }
                    });
                }
            });
    		
    		$("#heaBurType1").HNSelect({
                url: "${ctx}/selectController/getheaBurType.html", 
                data: { ID: '' }, 
                defaultText: "<option value=''>请选择</option>",
                defaultselect: "${heaBurInfo.heaBurtype.fatherType.heaBurTypeId}",
                func: function () {
                    $("#heaBurType2").HNSelect({
                        parent_selector: "#heaBurType1", 
                        url: "${ctx}/selectController/getheaBurType.html", 
                        dataid: "ID", 
                        defaultText: "<option value=''>请选择</option>",
                        defaultselect: "${heaBurInfo.heaBurtype.heaBurTypeId}"
                    });
                }
            });
    		
    		/* $("#heaBurLiceStartDate,#heaBurLiceEndDate,#enterLiceStartDate,#enterLiceEndDate").daterangepicker({
                timePicker: true,
                format: 'YYYY-MM-DD HH:mm:ss',
                timePickerIncrement: 1,
                timePicker12Hour: false,
                timePickerSeconds: true,
                singleDatePicker: true
            }); */
    		
    	});
    </script>
    
</body>
</html>
